<script lang="ts" setup>
import { ref, h } from "vue";
import { getPageList, download, deleteData } from "@/api/merchant/signlist"
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes } from "vxe-table";
import VxeUITable from "vxe-table";
const reVxeGridRef = ref();
const columns: VxeGridPropTypes.Columns<any> = [
  { type: "checkbox", title: "", width: 60, align: "center" },
  {
    title: "签约批次号",
    field: "importBatchNumber",
    minWidth: 100
  },
  {
    title: "成功/全部",
    field: "successfulNumber",
    showOverflow: true,
    minWidth: 200
  },
  {
    title: "状态",
    field: "importStatus",
    minWidth: 100
  },
  {
    title: "创建时间",
    field: "createTime",
    minWidth: 100
  }
];
const formRef = ref();

const handleInitialFormParams = () => ({
  importBatchNumber: "",
});
const formItems = [
  {
    field: "importBatchNumber",
    title: "签约批次号",
    span: 6,
    itemRender: { name: "$input", props: { placeholder: "请输入签约批次号" } }
  },
  {
    span: 6,
    itemRender: {
      name: "$buttons",
      children: [
        {
          props: {
            type: "submit",
            icon: "vxe-icon-search",
            content: "查询",
            status: "primary"
          }
        },
        { props: { type: "reset", icon: "vxe-icon-undo", content: "重置" } }
      ]
    }
  }
];
const formData = ref<{
  importBatchNumber: string;
  
}>(handleInitialFormParams());

const handleSearch = () => {
  reVxeGridRef.value.loadData();
};

const handleReset = () => {
  formData.value = handleInitialFormParams();
};

const createModalRef = ref();
const handleAdd = () => {
  createModalRef.value.showAddModal();
};
const handleEdit = (record: Recordable) => {
  createModalRef.value.showEditModal(record);
};

const handleDelete = async (record: Recordable) => {
  const type = await VxeUITable.modal.confirm("您确定要删除吗？");
  if (type == "confirm") {
    deleteData(record.id).then(() => {
      handleSearch();
    });
  }
};

const handleView = (record: Recordable) => {
  createModalRef.value.showViewModal(record);
};
const functions: Record<string, string> = {
  // add: "merchant.project.list.add",
  // edit: "merchant.project.template.edit",
  view: "merchant.management.index.view",
  delete: "merchant.management.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form
        ref="formRef"
        :data="formData"
        :items="formItems"
        @submit="handleSearch"
        @reset="handleReset"
      />
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <vxe-button content="下载模板" status="success" round></vxe-button>
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="getPageList"
        :functions="functions"
        :searchParams="formData"
        :columns="columns"
        @handleAdd="handleAdd"
        @handleView="handleView"
        @handleDelete="handleDelete"
      />
    </el-card>
    <!-- <CreateModal ref="createModalRef" @reload="handleSearch" /> -->
  </div>
</template>
